<!DOCTYPE html>
<html>
    <head>
        <title>自定义绘图</title>
        <script src="./js/three.js"></script>
    </head>
    <body>

    </body>
    <script>

        let scene=new THREE.Scene();
        let geometry=new THREE.BufferGeometry();
        let vertrices=new Float32Array([
            0,0,0,
            50,0,0,
            0,100,0,
            0,0,10,
            0,0,100,
            50,0,10
        ]);
        let attribute=new THREE.BufferAttribute(vertrices,3);
        geometry.attributes.position=attribute;

        //类型数组创建顶点颜色color数据
        var colors = new Float32Array([
            1, 0, 0, //顶点1颜色
            0, 1, 0, //顶点2颜色
            0, 0, 1, //顶点3颜色

            1, 1, 0, //顶点4颜色
            0, 1, 1, //顶点5颜色
            1, 0, 1, //顶点6颜色
        ]);
        // 设置几何体attributes属性的颜色color属性
        geometry.attributes.color = new THREE.BufferAttribute(colors, 3); 

        // 三角面(网格)渲染模式
        var material = new THREE.MeshBasicMaterial({
            // color: 0x0000ff, //三角面颜色
            vertexColors: THREE.VertexColors, //以顶点颜色为准
            side: THREE.DoubleSide //两面可见
        }); //材质对象
        var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
        scene.add(mesh)
        // 点渲染模式
        var material = new THREE.PointsMaterial({
            // color: 0xff0000,
            vertexColors: THREE.VertexColors, //以顶点颜色为准
            size: 20.0 //点对象像素尺寸
        }); //材质对象
        var points = new THREE.Points(geometry, material); //点模型对象
        scene.add(points); //点对象添加到场景中

        // 线条渲染模式
        var material=new THREE.LineBasicMaterial({
            color:0xff0000 //线条颜色
        });//材质对象
        var line=new THREE.Line(geometry,material);//线条模型对象
        scene.add(line);//线条对象添加到场景中
         /**
         * 相机设置
         */
        var width = window.innerWidth; //窗口宽度
        var height = window.innerHeight; //窗口高度
        var k = width / height; //窗口宽高比
        var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
        //创建相机对象
        var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
        camera.position.set(100, 100, 100); //设置相机位置
        camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
         
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);//设置渲染区域尺寸
        renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
        document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

        renderer.render(scene,camera)
    </script>
</html>